<template>
  <div class="layout-content-center" ref="editorArea">
    <div class="viewport-wrapper">
      <!-- <div class="render-page" :style="`transform: scale(${canvasScale});`"> -->
      <div style="padding: 40px">
        <el-form ref="form" :model="formData" label-width="80px">
          <div v-for="(item, i) in formFields" :key="i">
            <component v-bind="item" :is="`component-${item.type}`" :data="formData"></component>
          </div>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script>
import componentButton from './componentButton.vue'
import componentCheckbox from './componentCheckbox.vue'
import componentDate from './componentDate.vue'
import componentInput from './componentInput.vue'
import componentRadio from './componentRadio.vue'
import componentSelect from './componentSelect.vue'
import componentSwitch from './componentSwitch.vue'
export default {
  components: {
    componentButton,
    componentCheckbox,
    componentDate,
    componentInput,
    componentRadio,
    componentSelect,
    componentSwitch
  },
  data() {
    return {
      canvasScale: 1,
      viewportStyles: {
        width: 1,
        height: 1,
        left: 1,
        top: 1,
      },
      formData: {},
      formFields: [
        { label: '活动名称', type: 'input', parameter: 'input1' },
        { label: '活动区域', type: 'select', parameter: 'input2' },
        { label: "活动时间", type: 'date', parameter: 'input3' },
        { label: "即时配送", type: 'switch', parameter: 'input4' },
        { label: "活动性质", type: 'checkbox', parameter: 'input5' },
        { label: "特殊资源", type: 'radio', parameter: 'input6' },
        { label: "特殊资源", type: 'radio', parameter: 'input6' },
        { label: "特殊资源", type: 'radio', parameter: 'input6' },
        { label: "特殊资源", type: 'radio', parameter: 'input6' },
        { label: "特殊资源", type: 'radio', parameter: 'input6' },
        { label: "活动形式", type: 'input', parameter: 'input7' }
      ]
    }
  },
  created() {
    var obj = {}
    this.formFields.forEach(i => {
      obj[i.parameter] = ''
    })
    this.formData = obj
  },
  mounted() {
    this.initViewportPosition()
    window.addEventListener('resize', this.initViewportPosition)
  },
  methods: {
    setViewportPosition() {

    },
    initViewportPosition() {
      const ele = this.$refs.editorArea
      var width = parseInt(ele.clientWidth * 0.9)
      var left = parseInt(ele.clientWidth * 0.05)
      var height = parseInt((1080 * width) / 1920)
      var top = parseInt((ele.clientHeight - 40 - height) / 2)
      this.viewportStyles.width = width
      this.viewportStyles.left = left
      this.viewportStyles.height = height
      this.viewportStyles.top = top
      this.canvasScale = width / 1920
    }
  }
}
</script>

<style lang="less" scoped>
.layout-content-center {
  flex: 1;
  // background-color: #f9f9f9;
  position: relative;
  padding: 100px;

  .viewport-wrapper {
    background: #fff;
    // position: absolute;
    box-shadow: 0 0 15px 0 rgb(0 0 0 / 10%);
    overflow: auto;
    max-height: 80vh;
  }

  .render-page {
    width: 1920px;
    height: 1080px;
    overflow-y: auto;
    overflow-x: hidden;
    transform-origin: top left;
  }
}
</style>